<template>
  <div class="index formExpert">
    <Header></Header>
    <div class="main">
      <div class="mianOut">
        <div class="mianInner1">
          <div class="asTitle">
            <h3>评审专家信息</h3>
          </div>
          <div class="formbtns clearfix">
            <a class="send">发送</a>
            <a class="save">保存</a>
          </div>
          <el-table ref="multipleTable"
                    :data="data1">
            <el-table-column type="index"
                             align='center'
                             label='序号'
                             width="50">
            </el-table-column>
            <el-table-column prop="name"
                             label="专家姓名"
                             align='center'
                             width="150">
            </el-table-column>
            <el-table-column prop="company"
                             label="工作单位"
                             align='center'
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="zhicheng"
                             label="职称"
                             align='center'
                             width='150'>
            </el-table-column>
            <el-table-column prop="hangye"
                             label="所属行业"
                             align='center'
                             width="100">
            </el-table-column>
            <el-table-column prop="phone"
                             label="联系电话"
                             align='center'
                             width="120">
            </el-table-column>
            <el-table-column prop="area"
                             label="地区"
                             align='center'
                             width="100">
            </el-table-column>
            <el-table-column prop="identity"
                             label="身份"
                             align='center'
                             width="50">
            </el-table-column>
          </el-table>
        </div>
        <div class="mianInner2">
          <div class="asTitle">
            <h3>评审时间</h3>
          </div>
          <div class="timeSelect">
            <el-date-picker v-model="value1"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </div>

        <div class="mianInner3">
          <div class="asTitle"
               style="margin-bottom:50px;">
            <h3>待评审的应急预案</h3>
          </div>
          <el-table ref="multipleTable"
                    :data="data2">
            <el-table-column type="index"
                             align='center'
                             label='序号'
                             width="100">
            </el-table-column>
            <el-table-column label="文件名称"
                             align='center'
                             show-overflow-tooltip>
              <template slot-scope="scope">
                <a class="fileName">XX企业应急预案汇编</a>
              </template>
            </el-table-column>
            <el-table-column prop="size"
                             label="大小"
                             align='center'
                             width='150'>
            </el-table-column>
            <el-table-column prop="upPerson"
                             label="上传人"
                             align='center'
                             width='150'>
            </el-table-column>
            <el-table-column prop="upTime"
                             label="上传时间"
                             align='center'
                             width="200">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from '../common/header'
import Footer from '../common/footer'
export default {
  components: {
    Header,
    Footer
  },
  data () {
    return {
      value1: '',
      data1: [{
        name: '张三',
        company: 'C公司',
        zhicheng: '高级工程师专项预案',
        hangye: '电力行业',
        phone: '13467895643',
        area: '河南',
        identity: '组长'
      }, {
        name: '张三',
        company: 'C公司',
        zhicheng: '高级工程师专项预案',
        hangye: '电力行业',
        phone: '13467895643',
        area: '河南',
        identity: '组员'
      }, {
        name: '张三',
        company: 'C公司',
        zhicheng: '高级工程师专项预案',
        hangye: '电力行业',
        phone: '13467895643',
        area: '河南',
        identity: '组员'
      }],
      data2: [{
        size: '42.5KB',
        upPerson: '张三',
        upTime: '2019-05-25'
      }, {
        size: '42.5KB',
        upPerson: '张三',
        upTime: '2019-05-25'
      }, {
        size: '42.5KB',
        upPerson: '张三',
        upTime: '2019-05-25'
      }, {
        size: '42.5KB',
        upPerson: '张三',
        upTime: '2019-05-25'
      }, {
        size: '42.5KB',
        upPerson: '张三',
        upTime: '2019-05-25'
      }]
    };
  },
  methods: {

  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
.formExpert {
  .mianOut {
    padding: 42px 30px 0;
    .asTitle {
      h3 {
        font-weight: bold;
        font-size: 16px;
        color: #666;
        padding: 20px 0 0 20px;
      }
    }
    /*表格*/
    .el-table {
      width: calc(100% - 200px);
      margin: 0 auto;
      border-top: 1px solid #ebeef5;
      .fileName {
        text-decoration: underline;
        color: #4080ff;
        cursor: pointer;
      }
      .fileName:hover {
        opacity: 0.8;
      }
    }

    .el-table th > .cell {
      color: #333333;
      font-weight: bold;
    }
    .mianInner1 {
      background: #fff;
      padding-bottom: 30px;

      .el-button:hover {
        opacity: 0.8;
      }
      .formbtns {
        margin: 40px 0 20px;
        .save {
          display: block;
          float: right;
          margin-right: 15px;
          width: 79px;
          height: 36px;
          text-align: center;
          line-height: 36px;
          color: #fff;
          border-radius: 8px;
          background: #4080ff;
          background: linear-gradient(left, #6fb2ff 0%, #095fff 100%);
          cursor: pointer;
        }
        .save:hover {
          opacity: 0.8;
        }
        .send {
          display: block;
          float: right;
          margin-right: 100px;
          width: 120px;
          height: 36px;
          text-align: center;
          line-height: 36px;
          color: #fff;
          border-radius: 8px;
          background: #ccc;
          cursor: pointer;
        }
      }
    }
    .mianInner2 {
      background: #fff;
      padding-bottom: 50px;
      margin-top: 30px;

      .timeSelect {
        text-align: center;
        margin-top: 40px;
        .el-date-editor .el-range-separator {
          width: 6%;
        }
      }
    }
    .mianInner3 {
      background: #fff;
      margin-top: 30px;
      padding-bottom: 30px;
    }
  }
}
</style>
